<template>
  <div class="person otherUser">
    <div class="header">
      <van-nav-bar left-arrow @click-left="$router.history.go(-1)" >
        <div slot='right' class="rightBtn" @click='gz(info.userId,info.isFollow)' v-if='info.isFollow=="-1"'><span>+</span>关注</div>
        <div slot='right' class="rightBtn" @click='gz(info.userId,info.isFollow)' v-else>取消关注</div>
        <span slot='left' class="topleftIcon"><img src='../../../public/images/back2.png'/></span>
      </van-nav-bar>
      <!-- <div class="publicIcon icon1" @click='$router.push("/message")'><img src="../../../public/images/message.png"/></div> -->
      <!-- <div class="publicIcon icon2" @click='$router.push("/setting")'><img src="../../../public/images/setting.png"/></div> -->

      <div class="personInfo">
        <img :src="info.userPhoto" class="pic l"/>
        <div class="txt l">
          <h1 class="hide_other">{{info.userName? info.userName : '暂未设置'}}</h1>
          <p class="hide_other">学号：{{info.campusCode? info.campusCode : '暂未设置'}}</p>
        </div>
        <div class="xinyong r">
          <img src='../../../public/images/qt_29.png'/>信用值&nbsp{{info.creditNum}}
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="comments-box">
      <div class="num-box flex">
        <span>{{info.totalPostCnt}}</span>
        <span>{{info.totalCommodityCnt}}</span>
        <span>{{info.totalFollowCnt}}</span>
        <span>{{info.totalFollowerCnt}}</span>
      </div>

      <van-tabs v-model="activeName" color="rgba(74,172,233,1)">

        <van-tab title="帖子">
          <invitation :userId='userId'></invitation>
        </van-tab>
        <van-tab title="商品">
            <myShop :userId='userId'/>
        </van-tab>
        <van-tab title="关注">
          <concern :userId='userId'/>
        </van-tab>
        <van-tab title="粉丝">
          <fans :userId='userId'/>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import invitation from "./otherUser/invitation";
import concern from "./otherUser/concern";
import fans from "./otherUser/fans";
import myShop from "./otherUser/myShop";
import storage from "@/common/store";
export default {
  name: "comments",
  components:{
      invitation,
      concern,
      fans,
      myShop
  },
  data(){
    return{
      info:{},
      activeName: "",
      userId:this.$route.query.userId
    }
  },
  created(){
    this.getMessage();
    console.log(this.userId)
  },
  methods:{
    getMessage(){
      this.$get(this.$api.user.otherInfo,{userId:this.userId}).then(data=>{
        if(!data.data.userPhoto) data.data.userPhoto=require('../../../public/images/avtor.png')
        this.info=data.data;
        
        console.log(this.info);
      })
    },
    gz(userId,follow){
      let that=this;
      this.vueGz(userId,follow,function(){
        that.getMessage();
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .person{height: 100vh;background-color:#F5F5F5;}
  .header{height: 4rem;background: url('../../../public/images/my_01.png') no-repeat;background-size: 100% 100%;position: relative;}
  .header .publicIcon{width: 0.44rem;height: 0.44rem;position:absolute;top: 0.4rem;}
  .header .publicIcon img{width: 100%;height: 100%;display: block;}
  .header .icon1{right: 1.26rem;}
  .header .icon2{right: 0.3rem;}
  .header .personInfo{padding: 1.8rem 0.3rem 0;}
  .header .personInfo .pic{width: 1.4rem;height: 1.4rem;display: block;border-radius: 50%;overflow: hidden;}
  .header .personInfo .txt{margin: 0.2rem 0 0 0.2rem;}
  .header .personInfo .txt h1{font: 0.4rem/0.5rem '微软雅黑';color: #FFFFFF;font-weight: bolder;width: calc(100vw - 0.6rem - 1.4rem - 3rem);}
  .header .personInfo .txt p{font: 0.24rem/0.5rem '微软雅黑';color: #FFFFFF;width: calc(100vw - 0.6rem - 1.4rem - 3rem);}
  .header .personInfo .xinyong{width: 2.34rem;height: 0.74rem;border-radius: 0.37rem;border: 0.02rem solid #fff;margin-top: 0.32rem;font: 0.3rem/0.76rem '微软雅黑';color: #FBFE16;background-color: rgba(74,172,233,0.5);}
  .header .personInfo .xinyong img{width:0.27rem;height:0.32rem;display: inline-block;margin: 0 0.22rem 0.05rem;}
  .icons img{height: 0.42rem;margin-right: 0.25rem;}


.comments-box {
  width: 100%;
}
.comments-box .num-box {
  height: 1rem;
  background-color: #fff;
}
.comments-box .num-box span {
  display: block;
  width: 33.3%;
  text-align: center;
  line-height: 0.6rem;
  padding-top: 0.4rem;
  font-size: 0.36rem;
  font-weight: bold;
}

.tie {
  padding: 0.3rem;
  position: relative;
  /* border-top: 0.3rem solid #f5f5f5; */
  margin-top: 0.3rem;
}
.tie .top .pic {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  overflow: hidden;
}
.tie .top .txt1 {
  margin-left: 0.25rem;
}
.tie .top .txt1 .title .name {
  font: 0.32rem/0.35rem "微软雅黑";
  color: #4aace9;
  width: 1.5rem;
  float: left;
  height: 0.45rem;
}
.tie .top .txt1 .time {
  font: 0.24rem/0.35rem "微软雅黑";
  color: #999999;
}
.tie .top .btn_gz {
  width: 0.27;
  height: 0.28rem;
  display: block;
  margin-top: 0.26rem;
}
.tie .txt2 {
  font: 0.32rem/0.4rem "微软雅黑";
  color: #333333;
  margin: 0.3rem 0;
}
.tie .txt2 .more {
  color: #4aace9;
  margin-left: 0.2rem;
  font: 0.3rem/0.4rem "微软雅黑";
}
.tie .pic img {
  display: block;
  height: 1.4rem;
  margin-top: 0.04rem;
  width: 2.18rem;
  margin-bottom: 0.18rem;
}
.tie .bottom {
  font: 0.24rem/0.34rem "微软雅黑";
  color: #aaaaaa;
}
.tie .bottom .otherNum1 {
  float: right;
}
.tie .bottom img {
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.1rem;
}
</style>
